<template>
<div class="swiper-container ding">
  	<div class="swiper-wrapper" >
      <!-- 存放具体的轮播内容 -->
      	<div class="swiper-slide" v-for="item in lunboList">
      		<img :src="item.pic" alt="" />
      		<p>{{item.name}}</p>
      	</div>	
  	</div>
  	<!-- 如果需要分页器 -->
    <div class="swiper-pagination"></div>
    <!--<div :class="{'swiper-pagination':pagination}"></div>-->
</div>

</template>

<script>
	import CONFIG from "@/config";
	import axios from 'axios';
	import Swiper from 'swiper';
export default {
	
	mounted(){
		this._lunbo()
		this.canvous()
	},
	data() {
		return{
		    lunboList:[]
		}
	},
	methods:{
		_lunbo(){
			axios.get('/toutiao3').then((res) => {
				this.lunboList = res.data.data
				console.log(this.lunboList)
			}).then(() =>{
				this.canvous()
			})
		},
		canvous(){
			var mySwiper = new Swiper ('.swiper-container', {
		    loop: true,
		    autoplay: {
		    	delay:1500,
		    }, //动画时间
		    // 如果需要分页器
		    pagination: {
		      el: '.swiper-pagination',
		      clickable:true
		    },
		  })
	  },
	}
}
</script>

<style lang="scss">
@import "~@/assets/scss/swiper-4.1.0.min"

</style>
<style lang="scss" scoped>
.ding{
    position: relative;
    top: 80px;
}
/*@import "~@/assets/scss/hotdog"*/	
.swiper-container .swiper-wrapper .swiper-slide p{
    display: block;
    width: 100%;
    position: absolute;
    bottom: 0;
    text-indent: 15px;
    height: 50px;
    font-size: 17px;
    line-height: 60px;
    /*background: -webkit-linear-gradient(top,rgba(0,0,0,0) 0, rgba(0,0,0,.6) 100%);*/
    color: #fff;
    text-align: left;
    padding-bottom: 5px;
}	
</style>